<template>
  <div id="app">
    <ul>
      <li
        v-for="(item,index) in lists"
        :key="index"
        @click="choose(index)"
        :class="{active: index == current && current !==''}"
      >{{item}}</li>
    </ul>
    <button @click="add">添加一个数字</button>
    <ul>
      <li v-for="(item,index) in target" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App1",
  data() {
    return {
      lists: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      target: [],
      current: ""
    };
  },
  methods: {
    choose(index) {
      this.current = index;
    },
    add() {
      if (this.current === "") return;
      this.target.push(this.lists[this.current]);
      this.current = "";
    }
  }
};
</script>

<style>
li.active {
  background: greenyellow;
}
</style>
